<template>
	<view>
		<view class="containers">
			<view class="top-tab flex-wrp flex-tab">
				<view class="toptab flex-item" :class="{'active':currentNavtab==idx}" v-for="itemName,idx in navTab" :key="idx"
					@click="switchTab(idx)">
					{{itemName}}
				</view>
				<view class="addtab" @click="showModal">
					<text>业务项目配置></text>
				</view>
			</view>
			<view class="containers notify withtab">
				<view class="ctnt1 placehold" v-show="currentNavtab == '0'">
					<block v-for="item,index in feed" :key="index">
						<view class="feed-item">
							<view class="content-business flex-item">
								<a class="content-left">
									<text class="content-title-a flex-item">次卡：洗头-半年-99元</text>
								</a>
								<a class="content-right">
									<text class="content-title-b">2023.01.01~2025.12.31</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">今年销售28个</text>
								</a>
								<a class="content-right">
									<text class="content-a">本月销量: 34个</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">今年业绩: 10000元</text>
								</a>
								<a class="content-right">
									<text class="content-a">本月业绩: 10000元</text>
								</a>
							</view>
						</view>
					</block>
				</view>
				<view class="ctnt1 placehold" v-show="currentNavtab == '1'">
					<block v-for="item,index in feed" :key="index">
						<view class="feed-item">
							<view class="content-business flex-item">
								<a class="content-left">
									<text class="content-title-a flex-item">洗头</text>
								</a>
								<a class="content-right">
									<text class="content-title-b">20元/次</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">今年销售28个</text>
								</a>
								<a class="content-right">
									<text class="content-a">本月销量: 34个</text>
								</a>
							</view>
							<view class="content-title flex-item">
								<a class="content-left">
									<text class="content-a">今年业绩: 10000元</text>
								</a>
								<a class="content-right">
									<text class="content-a">本月业绩: 10000元</text>
								</a>
							</view>
						</view>
					</block>
				</view>
			</view>
			<tui-drawer mode="bottom" :visible="hideModal" @close="closeDrawer">
				<view class="d-container">
				  <view>
				  	<!-- 遮罩层-->
				  	<!-- <view class="modals-cancel" @click="hideModal"></view> -->
				  	<view>
				  		<button class="add-btn" @click="toAddProject">服务项目设置</button>
				  		<button class="add-btn" @click="toAddPackage">项目套餐设置</button>
				  		<button class="add-btn" @click="toAddCard">储蓄卡套餐设置</button>
				  	</view>
				  </view>
				</view>
			</tui-drawer>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				feed: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
				navTab: ["项目套餐", "服务项目"],
				currentNavtab: "0",
				hideModal: false,
			}
		},
		methods: {
			// 切换tab
			switchTab(i) {
				this.currentNavtab = i;
			},
			// 打开业务项目配置
			showModal() {
				this.hideModal = true;
			},
			// 关闭业务项目配置
			closeDrawer() {
				this.hideModal = false;
			}
		}
	}
</script>

<style lang="scss">
	/**index.wxss**/

	page {
		background-color: #f1f1f1;
	}

	.containers .search .search-left image {
		display: inline-block;
		width: 35rpx;
		height: 35rpx;
		padding: 15rpx 15rpx 15rpx 20rpx;
	}

	.containers .search .search-right {
		flex: 1;
	}

	.containers .search .search-right image {
		width: 45rpx;
		height: 45rpx;
		padding: 10rpx;
	}

	.containers {
		padding: 0;
		font-size: 14rpx;
		background: #F0F4F3;
		color: #000;
	}

	.addtab {
		color: #333333;
		width: 50%;
		align-items: center;
		text-align: end;
		margin-right: 20rpx;
		padding: 0rpx 10rpx;
	}

	.tab {
		background: #ffffff;
		height: 100rpx;
		box-shadow: 0 2px 2px #dadada;
		display: flex;
		align-items: center;
		width: 100%;
		display: flex;
		color: #999999;
		margin-left: 10rpx;
		margin-right: 10rpx;

	}

	.tab-button {
		height: 100rpx;
		background: #eeeeee;
		color: #777676;
		font-size: 28rpx;
		box-shadow: 0 2px 2px #dadada;
		margin: 0 0 8rpx 0;
		top: 0;
		width: 30%;
	}

	.top-tab {
		height: 90rpx;
		background: #ffffff;
		color: #999999;
		font-size: 28rpx;
		line-height: 90rpx;
		box-shadow: 0 2px 2px #eeeeee;
		margin: 0rpx 20rpx 20rpx 20rpx;
		position: fixed;
		top: 0;
		z-index: 9999;
		width: 100%;
	}

	.toptab.active {
		color: #1A222D;
		border-bottom: solid 2px #202226;
		margin-left: 20rpx;
		margin-right: 20rpx;

	}

	.toptab {
		color: #9C9C9C;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.btn {
		width: 80%;
		background-color: #EED1A7;
		color: #1A222D;
		margin-left: 10px;
		font: size 28rpx;
		margin-top: 10px;
		border-radius: 20px;
		font-size: 30rpx;
		padding: 6rpx;
		font-weight: 700
	}

	.add-btn {
		width: 80%;
		background-color: #eed1a4;
		color: #1A222D;
		margin-top: 20px;
		font-weight: normal;
		border-radius: 10px;
		font-size: 30rpx;
		padding: 5rpx;
		margin-bottom: 20rpx;

	}

	.content {
		display: flex;
		width: 100%;
		left: 0;
		height: 50rpx;
		font-size: 30rpx;
	}

	.content-title {
		width: 100%;
		left: 0;
		height: 50rpx;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.content-business {
		width: 100%;
		left: 0;
		height: 80rpx;
		font-size: 30rpx;
		margin-top: 10rpx;
		border-bottom: 1px solid #E8E8E8;
	}

	.content-left {
		justify-content: left;
		float: left;
		margin-top: 10rpx;
	}

	.content-right {
		justify-content: right;
		float: right;
		margin-top: 10rpx;

	}

	.content-title-a {
		color: black;
		margin-right: 20rpx;
	}

	.content-title {
		color: black;
		margin-right: 20rpx;
	}

	.content-title-a {
		color: black;
		margin-right: 20rpx;
		margin-top: 6rpx;
	}

	.content-a {
		width: 50%;
		color: rgb(167, 165, 165);
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.content-title-b {
		background-color: #F4E2C8;
		color: #1E2129;
		font-weight: normal;
		border-radius: 10px;
		font-size: 26rpx;
		padding-top: 8rpx;
		padding-bottom: 8rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.containers .feed-item {
		// width: 90%;
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx;
		background: #ffffff;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		box-shadow: 20rpx 2px 5px #eeeeee;
		border-radius: 10px;
	}

	/*feed-item part is in app.wxss for multiplexing*/
</style>